<template>
  <div>
    <MyHeader background="#1d7bff" 
    title="购物车案例"
    ></MyHeader>
    <div id="app">
      <MyGoods v-for="obj in list" :key="obj.id"
      :goodsObj="obj"
      ></MyGoods>
    </div>
    <MyFooter @changeCheck="changeFn" :arr="list"></MyFooter>
  </div>
</template>

<script>
// 目标：铺设数据
// 1.data里变量list去then里接受数据
// 2.上面循环使用 MyGoods组件
// 3.分别传入数据对象到 MyGoods组件里
// 4.在 MyGoods 组件内使用 MyCount 组件 ，父传子
import MyHeader from './components/MyHeader'
import MyGoods from './components/MyGoods'
import MyFooter from './components/MyFooter'
export default {
    components: {
      MyHeader,
      MyGoods,
      MyFooter
    },
    data(){
      return{
        list:[] //保存全部的商品数据
      }
    },
    created(){
      this.$axios({
        url:"/api/cart"
      }).then(res=>{
        console.log(res)
        this.list = res.data.list
      })
    },
    methods:{
      // 同步给数组里每个小选框关联的goods_state
     changeFn(bool){
          this.list.forEach(obj =>obj.goods_state = bool)
     }
    }     
}

</script>
<style>
#app {
  padding-top: 45px;
  padding-bottom: 50px;
}
</style>